<template>
  <div class="main user-role-list">
    <div class="filter-container">
      <el-input @keyup.enter.native="search" class="filter-item" placeholder="按名称搜索" v-model="listQuery.search"></el-input>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <router-link v-if="rightsButtons['add']" :to="{name: 'userRoleAdd'}" class="filter-item">
        <el-button type="success" icon="el-icon-plus">新建</el-button>
      </router-link>
    </div>
    <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
      <el-table-column align="center" label="角色名称" prop="role"></el-table-column>
      <el-table-column align="center" label="角色描述">
        <template slot-scope="scope">
          <div class="text-justify">
            <p v-text="scope.row.description"></p>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200" v-if="rightsButtons['edit'] || rightsButtons['delete']">
        <template slot-scope="scope" v-if="scope.row.id!==1">
          <router-link v-if="rightsButtons['edit']" :to="{name: 'userRoleEdit', params: {id: scope.row.id}}">
            <el-button type="primary" size="mini">编辑</el-button>
          </router-link>
          <el-button v-if="rightsButtons['delete']" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container" v-if="listTotal > 0">
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="listQuery.offset+1" :page-size="listQuery.limit" :total="listTotal" layout="total, prev, pager, next, jumper"></el-pagination>
    </div>
  </div>
</template>
<script>
import { getRoleList } from '../../../api/common'

export default {
  name: 'userRole',
  data() {
    return {
      listQuery: {
        search: '',
        offset: 0,
        limit: 20
      },
      list: [],
      listTotal: 0,
      listLoading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取列表
    fetchData() {
      this.listLoading = true
      getRoleList(this.listQuery).then(({rows, total}) => {
        this.list = rows
        this.listTotal = total
        this.listLoading = false
      }).catch(err => {
        this.list = []
        this.listTotal = 0
        this.listLoading = false
      })
    },
    // 搜索
    search() {
      this.listQuery.offset = 0
      this.fetchData()
    },
    // 分页
    handleCurrentChange(value) {
      this.listQuery.offset = value - 1
      this.fetchData()
    },
    // 删除
    del(item) {
      this.$confirm(`确定要删除 ${item.role} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request({
          url: '/bsnl-authority/role/delete',
          method: 'post',
          data: {
              id: [item.id],
              authorKey: 'userRoleDelete'
          }
        }).then(() => {
            this.$message.success('删除成功');
            this.fetchData()
        })
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>